<template>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" v-model="loginForm.username" autocomplete="off">
    <br>
    <br>
    <label for="password">
      Password:
    </label>
    <input type="password" id="password" name="password" v-model="loginForm.password" autocomplete="off">
    <br>
    <br>
    <input type="submit" value="Submit" @click="validate">
  </form>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {
      //属性变量
      loginForm:{
        username:'',
        password:''
      }
    }
  },
  methods: {
    validate() {
      if (this.loginForm.username == "zs" && this.loginForm.password == "123") {
        alert('登录成功');
      } else {
        alert("Invalid username or password. Please try again.");
      }
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
